<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>指令与事件</title>
</head>
<body>
    <fieldset>
        <legend>
            指令与事件
        </legend>
        <p>
            指令(Directives)是Vue.js模板中最常用的一项功能，它带有前缀v-，比如 v-if、 v-html 、 v-pre 等。
            指令的主要职责就是当其表达式的值改变时，相应地将某些行为应用到DOM上
        </p>
        <fieldset>
            <legend>v-if指令</legend>
            <div id="app1">
                <!--当数据show的值为true时，p元素会被插入，为false时则会被移除。-->
                <p v-if="show">显示这段文本</p>
            </div>
        </fieldset>
        <fieldset>
            <legend>v-bind指令</legend>
            <p>
                v-bind 的基本用途是动态更新HTML元素上的属性
            </p>
            <div id="app2">
                <!--v-bind 的基本用途是动态更新HTML元素上的属性-->
               <!-- <a href=""></a>-->
               <a :href="linkUrl">链接</a>
                <br/>
                <img v-bind:src="imgUrl" v-bind:width="imgWidth" v-bind:height="imgHeight"/>
            </div>
        </fieldset>
        <fieldset>
            <legend>v-on指令</legend>
            <p>
                v-on指令是用来绑定事件监听器
            </p>
            <div id="app3">
                <!--当数据show的值为true时，p元素会被插入，为false时则会被移除。-->
                <p v-if="show">显示这段文本</p>
                <button v-on:click="handleClose">{{btnText}}</button>
            </div>
        </fieldset>
        <fieldset>
            <legend>语法糖</legend>
            <p>
                语法糖是指在不影响功能的情况下，添加某种方法实现同样的效果，从而方便程序开发。
                Vue.js的v-bind和v-on指令都提供了语法糖，也可以说是缩写，比如v-bind可以省略v-bind,直接写一个冒号“:”
                v-on可以直接用"@"来缩写，使用语法糖可以简化代码的书写
            </p>
            <div id="app4">
                <!--v-bind:href的缩写-->
                <a :href="linkUrl">链接</a>
                <br/>
                <img :src="imgUrl" :width="imgWidth" :height="imgHeight"/>
                <!--当数据show的值为true时，p元素会被插入，为false时则会被移除。-->
                <p v-if="show">显示这段文本</p>
                <!--v-on:click-->
                <button @click="handleClose">{{btnText}}</button>
            </div>
        </fieldset>
    </fieldset>
</body>
</html>
<script src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var app1 = new Vue({
        el:"#app1",
        data:{
            show:true
        }
    });

    var app2 = new Vue({
        el:"#app2",
        data:{
            linkUrl:"http://www.cnblogs.com",
            imgUrl:"http://img.zcool.cn/community/018d4e554967920000019ae9df1533.jpg@900w_1l_2o_100sh.jpg",
            imgWidth:200+"px",
            imgHeight:100+"px"
        }
    });

    var app3 = new Vue({
        el:"#app3",
        data:{
            show:true,
            btnText:"点击隐藏"
        },
        /**
         * 如果绑定的事件要处理复杂的业务逻辑，建议还是在methods 里声明一个方法，这样可读性更强也好维护。
         */
        methods:{
            handleClose:function () {
                if(this.show){
                    this.show = false;
                    this.btnText="点击显示";
                }else{
                    this.show = true;
                    this.btnText="点击隐藏";
                }
            }
        }
    });

    var app4 = new Vue({
        el:"#app4",
        data:{
            linkUrl:"http://www.cnblogs.com",
            imgUrl:"http://img.zcool.cn/community/018d4e554967920000019ae9df1533.jpg@900w_1l_2o_100sh.jpg",
            imgWidth:200+"px",
            imgHeight:100+"px",
            show:true,
            btnText:"点击隐藏"
        },
        /**
         * 如果绑定的事件要处理复杂的业务逻辑，建议还是在methods 里声明一个方法，这样可读性更强也好维护。
         */
        methods:{
            handleClose:function () {
                if(this.show){
                    this.show = false;
                    this.btnText="点击显示";
                }else{
                    this.show = true;
                    this.btnText="点击隐藏";
                }
            }
        }
    });
</script>